<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>多功能厅介绍</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/style/home.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <ul class="layui-nav layui-bg-cyan">
      <li class="layui-nav-item"><a href="/distribution">基本介绍</a></li>
      <li class="layui-nav-item"><a href="/introduction">馆藏分布</a></li>
      <li class="layui-nav-item"><a href="/dynamic">最新动态</a></li>
      <li class="layui-nav-item layui-this"><a href="#">馆多功能厅</a></li>
    </ul>
    <br>
    <ul th:replace="/common/head::head-right"></ul>
  </div>
  <div class="layui-body home-body">
    <div class="layui-container home-container">
      <!--介绍-->
      <fieldset class="layui-elem-field layui-border-black">
        <legend>基本信息</legend>
        <div class="layui-field-box">
          <div class="home-panel">
            <div class="home-panel-image"><img width="200" height="200"
                                               th:src="'/api/oss/download?file='+${room.imagePath}"
                                               alt="多功能厅图片"></div>
            <span class="home-panel-context">
            <div>房间号: <span th:text="${room.roomNumber}"></span></div>
            <div>面积: <span th:text="${room.area}"></span>㎡</div>
            <div>所需积分: <span th:text="${room.needScore}"></span></div>
            <div>所在楼层: <span th:text="${room.floor}"></span>楼</div>
            <div>详情: <span th:text="${room.detail}"></span></div>
            <div>
              <button th:if="${session.user != null}" type="button" id="reservation"
                      class="layui-btn layui-btn-xs">预订</button>
              <a th:if="${session.user == null}" th:href="'/home/login?source=detail%3Fid%3D'+${room.id}"
                 class="layui-btn layui-btn-xs">预订</a>
            </div>
        </span>
          </div>
        </div>
      </fieldset>
      <fieldset class="layui-elem-field layui-border-black">
        <legend>预订情况</legend>
        <div class="layui-field-box">
          <div th:each="reservation : ${reservationList}">
            预订人：<span th:text="${reservation.userName}"></span>
            预订时间：<span th:text="${#dates.format(reservation.startTime, 'yyyy-MM-dd hh:mm:ss')}"></span>
            至 <span th:text="${#dates.format(reservation.endTime, 'yyyy-MM-dd hh:mm:ss')}"></span>
            <span th:if="${reservation.state == 'INIT'}" class="layui-badge">状态: 审核中</span>
            <span th:if="${reservation.st && reservation.state == 'PASS'}" class="layui-badge">状态: 使用中</span>
            <span th:if="${not reservation.st && reservation.state == 'PASS'}" class="layui-badge layui-bg-green">状态: 等待中</span>
          </div>
        </div>
      </fieldset>
      <fieldset class="layui-elem-field layui-border-black">
        <legend>倾诉墙</legend>
        <div class="layui-field-box">
          <div th:each="comment : ${commentList}">
            评论人：<span th:text="${comment.userName}"></span>
            评论时间：<span th:text="${#dates.format(comment.time, 'yyyy-MM-dd hh:mm:ss')}"></span>
            评论内容: <span th:text="${comment.context}"></span>
          </div>
        </div>
      </fieldset>
    </div>
  </div>
  <div class="layui-footer home-footer">
    <!-- 底部固定区域 -->
    © 2021 layui.com
  </div>
</div>
<div id="reservation-form" class="detail-hide">
  <form class="layui-form">
    <div class="layui-hide">
      <input name="roomId" th:value="${room.id}">
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">开始日期</label>
      <div class="layui-input-inline">
        <input type="text" name="startTime" id="startTime" required lay-verify="required"
               class="layui-input datetime"/>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">结束日期</label>
      <div class="layui-input-inline">
        <input type="text" name="endTime" id="endTime" required lay-verify="required"
               class="layui-input datetime"/>
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button id="insert" class="layui-btn" lay-submit lay-filter="insert">立即提交</button>
        <button id="reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</div>
<script src="/utils.js"></script>
<script src="/layui/layui.js"></script>
<script src="/jquery/jquery-3.5.1.min.js"></script>
<script>
  $.ajaxSetup({
    dataType: "json",
    contentType: "application/json",
  });
  layui.use(['layer', 'form', 'laydate'], (layer, form, laydate) => {
    form.on('submit(insert)', (data) => {
      const value = data.field;
      $.ajax({
        type: 'post',
        data: JSON.stringify(value),
        url: '/api/room/reservation',
        success: function (data) {
          if (data.code === 2000) {
            layer.msg(data.message);
            setTimeout(() => {
              layer.closeAll()
              $("#reservation-form").css("display", "none");
            }, 1500)
          } else {
            layer.msg(data.message);
          }
        }
      });
      return false;
    });
    laydate.render({
      elem: document.getElementById('endTime'),
      type: 'datetime',
    });
    laydate.render({
      elem: document.getElementById('startTime'),
      type: 'datetime',
    });
    $("#reservation").click(() => {
      layer.open({
        title: '提交预约',
        type: 1,
        skin: 'layui-layer-rim', //加上边框
        area: ['auto'], //宽高
        offset: 'auto',
        closeBtn: 1,
        content: $("#reservation-form"),
        cancel: function () {
          $("#reservation-form").css("display", "none");
        },
      });
    });

  })
</script>
</body>
</html>